<template>
  <view
    class="filter-drawer"
    @click="bindClose"
    :style="show ? 'display: flex;' : 'display: none;'"
    @touchmove.stop.prevent="doNothing"
  >
    <!-- <view class="mask" :style="{background:show?'rgba(0,0,0,0.4)':'none'}"  >
		</view>	 -->
    <view style="width: 100%" class="main">
      <view class="filter-content" @click.stop="clickstop">
        <view class="down" @click="bindClose"
          ><view class="down-btn"></view
        ></view>
        <view class="middle">
          <view class="filter-content-title">筛选</view>
          <scroll-view
            scroll-y="true"
            style="max-height: 700rpx"
            :enhanced="true"
            :bounces="false"
            :show-scrollbar="false"
            :scroll-top="scrollTop"
          >
            <view class="filter-content-list"
              ><view
                :class="['tag', allChecked ? 'act' : '']"
                style="width: 216rpx"
                @click="chooseAll"
                >全部</view
              >
            </view>
            <view v-for="(item, index) in filterList" :key="index">
              <view
                class="filter-content-list"
                :style="border ? 'border-top:1rpx solid #eee' : ''"
                v-if="fitlerContract(item)"
              >
                <view
                  class="subTitler"
                  :style="{
                    'padding-bottom': contractState ? '0rpx' : '20rpx',
                  }"
                >
                  <view class="filter-content-list-title" v-if="item.title"
                    >{{ item.title }}
                  </view>
                  <view
                    v-if="isShowMoreTag(item.list, item.key)"
                    @click="showMore(item)"
                    class="moreTag"
                  >
                    <view>
                      {{ showMap[item.key].flag ? "收起" : "显示更多" }}
                    </view>
                    <view style="display: flex; align-items: center">
                      <image
                        class="moreImg"
                        src="@/static/images/maintain/sq.png"
                        v-if="showMap[item.key].flag"
                      />
                      <image
                        class="moreImg"
                        src="@/static/images/maintain/zk.png"
                        mode=""
                        v-else
                      />
                    </view>
                  </view>
                </view>
                <view :class="['tag-content']">
                  <view
                    v-for="(it, idx) in item.list"
                    :key="idx"
                    :class="['tag-content-item']"
                  >
                    <view
                      @click="chooseTag(item.key, it)"
                      :class="['tag', getChooseStatus(item, it) ? 'act' : '']"
                      v-if="
                        Object.keys(showMap).length && showMap[item.key].flag
                          ? item.list
                          : idx < 6
                      "
                    >
                      {{ it.name }}
                    </view>
                  </view>
                  <!-- <view
                  @click="chooseTag(item.key, it)"
                  :class="['tag', getChooseStatus(item, it) ? 'act' : '']"
                 >
                <view v-if="Object.keys(showMap).length && showMap[item.key].flag ? item.list : idx < 6">
                  {{ it.name }}
                </view>
                </view> -->
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
      <view class="bottom">
        <view class="reSet" @click.stop="handleReset">重置</view>
        <view class="submit" @click.stop="submit">{{ comfireText }}</view>
      </view>
    </view>
  </view>
</template>

<script>
// 用法
// <filter-drawer :show="showFilter" @closed="showFilter=false" @submit="submitFilter"></filter-drawer>
// border 是否显示分割线
// filterList  筛选列表 格式 [{title:'',list:[],key:'xxx'}] key代表筛选字段 示例看下面filterList 的return
// chooseData 默认选中 格式 {key:[1,2,3]}
export default {
	name: 'filter-drawer',
	data() {
		return {
			choosed: {},
			allChecked: false,
			// parentArr: [
			// 	{ name: '待处理', value: 1, type: 'status2' },
			// 	{ name: '进行中', value: 2, type: 'status2' },
			// 	{ name: '已完成', value: 4, type: 'status2' },
			// 	{ name: '未排期', value: 0, type: 'status1' }
			// ], //

			showMap: {},
			scrollTop: 0,
		};
	},
	props: {
		chooseData: {
			type: Object,
			default: () => {
				return {};
			},
		},
		border: {
			// 是否显示边框
			type: Boolean,
			default: false,
		},
		filterList: {
			type: Array,
			default: () => {
				return [];
				// return [{ title: '合同', list: [{ name: '即将到期', value: '1' }], key: 'status' }, { title: '项目类型', list: [{ name: '学校', value: '1' },{name:'小区',value:'2'}], key: 'school' }]
			},
		},
		show: {
			type: Boolean,
			default: true,
		},
		comfireText: {
			type: String,
			default: '确认',
		},
		keyMap: {
			type: Object,
			default: ()=>{
				return {};
			}
		},
		// 合同统计页面
		contractState: {
			type: Boolean,
			default: false,
		},
	},
	watch: {
		// chooseData: {
		//        handler: function(val) {
		// 		console.log(val,'watch的值')
		//         this.choosed=val

		//       },
		//       deep: true
		//   },
		keyMap(val) {
			this.showMap = val;
		},
		show(val) {
			if (val) {
				this.scrollTop = 1;
				this.$nextTick(() => {
					this.scrollTop = 0;
				});
			}
		},
	},
	created() {
		this.choosed = this.chooseData;
	},
	methods: {
		doNothing() {},
		fitlerContract(item) {
			let flag = true;
			if (item.key == 'contractStatus') {
				flag = this.findRoute('mystatistics_contract');
			}
			return flag;
		},
		initData(obj) {
			this.choosed = obj;
		},
		// 获取是否选中
		getChooseStatus(item, it) {
			if (this.choosed[item.key] && this.choosed[item.key].length > 0) {
				if (this.choosed[item.key].indexOf(it.value) != -1) {
					return true;
				}
			}
			return false;
		},
		// 选中某个标签
		chooseTag(key, it) {
			// 如果是全选全选关闭
			if (this.allChecked) {
				this.allChecked = false;
			}
			// 合同统计详情页搜索单选
			if (this.contractState) {
				this.chooseTagRadio(key, it);
				return;
			}

			if (this.choosed[key]) {
				let idx = this.choosed[key].indexOf(it.value);
				if (idx == -1) {
					this.choosed[key].push(it.value);
				} else {
					this.choosed[key].splice(idx, 1);
				}
			} else {
				this.choosed[key] = [it.value];
			}
			this.$forceUpdate();
			console.log('key, it', key, it, this.choosed);
			this.$emit('chooseTag', {
				allChecked: this.allChecked,
				choosed: this.choosed,
			});
		},
		// 合同详情筛选 单选
		chooseTagRadio(key, it) {
			if (this.choosed[key]) {
				let ids = this.choosed[key].indexOf(it.value);
				if (ids == -1) {
					this.choosed[key].push(it.value);
					this.choosed[key].forEach((item, i, arr) => {
						if (item != it.value) {
							arr.splice(i, 1);
						}
					});
				}
			} else {
				this.choosed[key] = [it.value];
				for (let attr in this.choosed) {
					if (attr != key) {
						delete this.choosed[attr];
					}
				}
			}
			this.$forceUpdate();
			this.$emit('chooseTag', {
				allChecked: this.allChecked,
				choosed: this.choosed,
			});
		},
		// 全选
		chooseAll() {
			this.choosed = {};
			// if(this.allChecked){
			// 	this.choosed={}
			// }
			this.allChecked = !this.allChecked;
			// console.log(this.choosed)
			// console.log(this.allChecked,'this.allChecked',this.filterList)
			// if(this.allChecked){
			//           let obj={}
			// 	this.filterList.forEach(item=>{
			// 	 let arr=[]
			// 	 for(let i =0;i<item.list.length;i++){
			// 		 obj[item.key]=item.list.map(v=>{return v.value})
			// 	 }

			// 	})
			// 	this.choosed=obj
			// }

			this.$emit('chooseTag', {
				allChecked: this.allChecked,
				choosed: this.choosed,
			});
		},
		// 确定
		async submit() {
			this.$emit('submit', {
				allChecked: this.allChecked,
				choosed: this.choosed,
				parentArr: this.parentArr,
				keyMap: this.showMap,
			});
		},
		clickstop() {},
		bindClose() {
			this.$emit('closed', 1);
		},
		// 标签点击更多
		showMore(e) {
			console.log(e, 'e的值');
			this.showMap[e.key].flag = !this.showMap[e.key].flag;
		},
		// 判断是否显示更多
		isShowMoreTag(list, key) {
			if (!Object.keys(this.showMap).length) {
				return;
			}
			let flag = false;
			if (list.length > 6) {
				flag = true;
				if (this.showMap[key].flag) {
					flag = true;
				}
			}
			return flag;
		},
		// 点击重置
		handleReset() {
			let len = Object.keys(this.choosed).length;
			if (len !== 0) {
				for (let key in this.choosed) {
					this.choosed[key] = [];
					this.$forceUpdate();
				}
				this.choosed = {};
			}
			console.log(this.choosed, '重置按钮');
			if (this.allChecked) {
				this.allChecked = false;
			}
			this.$emit('chooseTag', { allChecked: false, choosed: this.choosed });
		},
	},
};
</script>

<style lang="scss" scoped>
.filter-drawer {
  width: 100%;
  height: 100%;
  background-color: $uni-bg-color-mask;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-end;
  animation: fadeInOut 0.3s ease;
  box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
  .mask {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .main {
    position: absolute;
    bottom: 0;
    background-color: #fff;
    // max-height: 1100rpx;
    // overflow: auto;
    border-radius: 8rpx 8rpx 0rpx 0rpx;
    animation: scaleFrames 0.3s ease;
  }
  .filter-content {
    width: calc(100% - 80rpx);
    margin: 0 auto;
    background-color: #fff;
    border-top-right-radius: 8rpx;
    border-top-left-radius: 8rpx;
    animation: scaleFrames 0.3s ease;
    padding-top: 0rpx;
    // padding-bottom: 10rpx;
    // overflow-y: auto;
    .down {
      width: 100%;
      padding: 20rpx 0;
      .down-btn {
        width: 64rpx;
        height: 10rpx;
        background: #d8d8d8;
        border-radius: 6rpx;
        margin: 0 auto;
      }
    }
    .middle {
      max-height: 1000rpx;
      overflow-y: auto;
    }
    &-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }

    &-list {
      // display: flex;
      width: 100%;
      flex-wrap: wrap;
      padding: 10rpx 0 10rpx 0;
      .subTitler {
        display: flex;
        justify-content: space-between;
        min-height: 40rpx;
        align-items: center;
        .moreTag {
          color: #0091ff;
          // padding-right: 30rpx;
          display: flex;
          justify-content: flex-end;
          font-size: 24rpx;
          width: 300rpx;
          .moreImg {
            width: 24rpx;
            height: 24rpx;
          }
        }
      }
      &-title {
        // width: 100%;
        font-size: 30rpx;
        text-align: left;
        color: #333333;
        font-weight: 600;
        padding-bottom: 0rpx;
      }
      .tag {
        height: 48rpx;
        line-height: 48rpx;
        text-align: center;
        border: 2rpx solid #cccccc;
        border-radius: 8rpx;
        margin-bottom: 14rpx;
        font-size: 28rpx;
        color: #666666;
        transition: 0.3s all;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 216rpx;
        box-sizing: border-box;
      }
      .act {
        color: #0091ff;
        border-color: #0091ff;
      }
      .tag-content {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        .tag-content-item {
          width: 33.3%;
          display: flex;
        }
        .tag-content-item:nth-child(3n) {
          justify-content: flex-end;
        }
        .tag-content-item:nth-child(3n + 5),
        .tag-content-item:nth-child(2) {
          justify-content: center;
        }
      }
      .normalContentItem {
        margin-right: 11rpx;
      }
      .normalContent {
        justify-content: flex-start;
      }
    }
  }
}

@keyframes scaleFrames {
  from {
    transform: translateY(110%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes fadeInOut {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.bottom {
  display: flex;
  padding: 20rpx 38rpx;
  border-top: 2rpx #eee solid;
  view {
    display: flex;
    flex: 1;
    height: 70rpx;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
  }
  .reSet {
    background-color: #f5fbff;
    color: #0091ff;
    // margin-right: 10rpx;
    border-top-left-radius: 8rpx;
    border-bottom-left-radius: 8rpx;
  }
  .submit {
    // width: 100%;
    // text-align: center;
    border-top-right-radius: 8rpx;
    border-bottom-right-radius: 8rpx;
    background-color: $theme-color;
    color: #fff;
  }
}
</style>
